﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Row and Column</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        input[type="text"] {
            width: 80px;
        }

        label {
            display:inline-block;
            width: 120px;
        }

        input[type="button"] {
            width: 120px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            var spreadNS = GcSpread.Sheets,
                sheet = spread.getSheet(0),
                SheetArea = spreadNS.SheetArea;

            sheet.isPaintSuspended(true);
            sheet.setRowCount(2, SheetArea.colHeader);
            sheet.setRowCount(10, SheetArea.viewport);
            sheet.setColumnCount(2, SheetArea.rowHeader);
            sheet.setColumnCount(6, SheetArea.viewport);
            sheet.setRowHeight(4, 0);
            sheet.setColumnWidth(2, 0);
            spread.resizeZeroIndicator(GcSpread.Sheets.ResizeZeroIndicator.Enhanced);
            sheet.isPaintSuspended(false);

            $("#resizeZeroIndicator").val(spread.resizeZeroIndicator());

            $("#resizeZeroIndicator").change(function () {
                spread.resizeZeroIndicator(+$(this).val());
            });

            /*
            * Add a row in viewport area.
            */
            $("#btnAddRow").click(function () {
                var sheet = spread.getActiveSheet();

                if (sheet) {
                    sheet.addRows(sheet.getRowCount(SheetArea.viewport), 1);
                }
            });

            /*
            * Delete a row in viewport area.
            */
            $("#btnAddColumn").click(function () {
                var sheet = spread.getActiveSheet();

                if (sheet) {
                    sheet.addColumns(sheet.getColumnCount(SheetArea.viewport), 1);
                }
            });

            /*
            * Add a column in viewport area.
            */
            $("#btnDeleteRow").click(function () {
                var sheet = spread.getActiveSheet();

                if (sheet) {
                    sheet.deleteRows(sheet.getRowCount(SheetArea.viewport) - 1, 1);
                }
            });

            /*
            * Delete a column in viewport area.
            */
            $("#btnDeleteColumn").click(function () {
                var sheet = spread.getActiveSheet();

                if (sheet) {
                    sheet.deleteColumns(sheet.getColumnCount(SheetArea.viewport) - 1, 1);
                }
            });

            /*
            * Show or hide the specified row.
            */
            $("#chkRowVisible").click(function () {
                var sheet = spread.getActiveSheet();
                var rowIndex = parseInt($("#rowIndex").val());

                if (!isNaN(rowIndex)) {
                    sheet.setRowVisible(rowIndex, $(this).prop("checked"));
                }
            });

            /*
            * Auto fit or not fit the specified row.
            */
            $("#chkRowAutoFit").click(function () {
                var sheet = spread.getActiveSheet();
                var rowIndex = parseInt($("#rowIndex").val());

                if (!isNaN(rowIndex)) {
                    var checked = $(this).prop("checked");

                    if (checked) {
                        sheet.autoFitRow(rowIndex);
                    }
                }
            });

            /*
            * Show or hide the specified column.
            */
            $("#chkColumnVisible").click(function () {
                var sheet = spread.getActiveSheet();
                var columnIndex = parseInt($("#columnIndex").val());

                if (!isNaN(columnIndex)) {
                    sheet.setColumnVisible(columnIndex, $(this).prop("checked"));
                }
            });
            /*
            * Auto fit or not fit the specified column.
            */
            $("#chkColumnAutoFit").click(function () {
                var sheet = spread.getActiveSheet();
                var columnIndex = parseInt($("#columnIndex").val());

                if (!isNaN(columnIndex)) {
                    var checked = $(this).prop("checked");

                    if (checked) {
                        sheet.autoFitColumn(columnIndex);
                    }
                }
            });
        });
        /*code_end*/
    </script>
</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:350px;border: 1px solid gray;"> </div>
        <div class="demo-options">
			<div class="option-row">
				<input type="button" value="Add Row" id="btnAddRow" />
                <input type="button" value="Delete Row" id="btnDeleteRow" />
				<input type="button" value="Add Column" id="btnAddColumn" />
				<input type="button" value="Delete Column" id="btnDeleteColumn" />
			</div>
			<div class="option-row">
				<label for="rowIndex" style="display: inline-block;width: 100px">Row Index:</label>
				<input type="text" id="rowIndex"/>
				<input type="checkbox" id="chkRowVisible" checked />
                <label for="chkRowVisible">Row Visible</label>
				<input type="checkbox" id="chkRowAutoFit" />
                <label for="chkRowAutoFit">Row AutoFit</label>
			</div>
			<div class="option-row">
				<label for="columnIndex" style="display: inline-block;width: 100px">Column Index:</label>
				<input type="text" id="columnIndex" />
				<input type="checkbox" id="chkColumnVisible" checked />
                <label for="chkColumnVisible">Column Visible</label>
				<input type="checkbox" id="chkColumnAutoFit" />
                <label for="chkColumnAutoFit">Column AutoFit</label>
			</div>
            <br />
            <div class="option-row">
                <span>ResizeZeroIndicator:</span>
                <select id="resizeZeroIndicator">
                    <option value="0">Default</option>
                    <option value="1">Enhanced</option>
                </select>
            </div>
		</div>
		</div>
    
</body>
</html>